<!--
 * @Author: your name
 * @Date: 2021-03-12 19:53:15
 * @LastEditTime: 2021-03-26 20:41:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \robotc:\Users\hechuan\Desktop\80\vue2_admin_system\src\App.vue
-->
<script>
export default {
    data() {
        return {
            tagsList:[]
        }
    },
    render() {
        return (
            <div id='app'>
                <router-view name='headerView' id="headerView"/>
                <router-view
                    name='TagsView'
                    id="tagsView"
                    tagsList={ this.tagsList }
                    setTabs={ this.setTabs }
                    closeAll={ this.closeAll }
                    closeOther={ this.closeOther }
                />
                <keep-alive include={ this.tagsList.filter(item => item.name).map(item => item.name) }>
                    <router-view name='globalView' id='omGlobalView'/>
                </keep-alive>
            </div>
        )
    },
    watch:{
        $route(route) {
            if ( route.name !== 'login' ) {
                const isExist = this.tagsList.some(item => item.path === route.fullPath )
                if (!isExist) {
                    this.tagsList.push({
                        title: route.meta.name,
                        path: route.fullPath,
                        name:route.matched[0] ? route.matched[0].components.globalView.name : '',
                        menuId:route.meta.menuId
                    })
                }
                this.$store.state.tags.activeIndex = route.meta.menuId
            } else if (route.name === 'login') {
                this.tagsList = []
            }
        }
    },
    methods:{
        setTabs(item, route) { // 点击X关闭标签
            if (this.tagsList.length === 1 && this.tagsList[0].path === '/home') return // 如果最后一项是home 不关闭
            const arr = []
            let index = 0
            this.tagsList.forEach((element, i) => {
                if (element.menuId === item.menuId) {
                    index = i // 保存过滤项索引
                    return
                }
                arr.push(element) // 过滤删除项
            })
            this.tagsList = arr

            const length = this.tagsList.length
            if (item.path === route) { // 判断删除项是当前选中项
                if (length < 1) { // 如果无缓存组件则跳到首页
                    this.$router.push('/')
                    this.$store.state.tags.activeIndex = '10'
                    return
                }
                if (index === 0) { // 删除项是第一项继续选中过滤后的第一项
                    const currentRoute = this.tagsList[0]
                    this.$router.push(currentRoute.path)
                    this.$store.state.tags.activeIndex = currentRoute.menuId
                    return
                }
                const currentRoute = this.tagsList[index - 1]
                this.$router.push(currentRoute.path)
                this.$store.state.tags.activeIndex = currentRoute.menuId
            }
        },
        closeAll() { // 关闭全部标签
            this.tagsList = []
            this.$router.push('/')
        },
        closeOther(route) { // 关闭其他标签
            this.tagsList = this.tagsList.filter(element => element.path === route)
        }
    }
}
</script>
